<template>
  <div class="home">
    <div class="nav" style="-webkit-app-region: drag">
      <div class="navLeft">
        <div class="navL-logo">
          DOTA
        </div>
        <div class="navServer" style="-webkit-app-region: no-drag;">
          <input type="text" placeholder="搜索联系人，群组，聊天消息">
        </div>
      </div>
      <div class="navRight" style="-webkit-app-region: no-drag;">
        <div id="goLogin" @click="goLoginClick" style="-webkit-app-region: no-drag;">
          退出登录
        </div>
        <div id="minSize" @click="minSizeClick" style="-webkit-app-region: no-drag;">
          最小化
        </div>
        <div id="maxSize" @click="maxSizeClick" style="-webkit-app-region: no-drag;">
          最大化
        </div>
        <div id="closed" @click="closedClick" style="-webkit-app-region: no-drag;">
          关闭
        </div>
      </div>
    </div>
    <div class="main">
      <div class="mainLeft">
        <ul>
          <li v-for="(item,index) in navLists" :class="{'navLi':isNavLi,'navSelectLi':isNavSelectLi == index}" :key="index" @click="navClick(index)">
            {{item.name}}
          </li>
        </ul>
      </div>
      <div class="mainRight">
            <router-view keep-alive></router-view>
      </div>
    </div>
  </div>
</template>

<script>
if (window.require) {
  var ipcRenderer = window.require("electron").ipcRenderer;
}
export default {
  data() {
    return {
      navLists: [
        { name: "first blood", path: "firstblood" },
        { name: "double kill", path: "doubleblood" },
        { name: "triple kill", path: "tripleblood" }
        // { name: "ultra kill", path: "ultrablood" },
        // { name: "rampage kill", path: "rampageblood" },
        // { name: "Killing Spree", path: "KillingSpree" },
        // { name: "Dominating", path: "Dominating" },
        // { name: "MegaKill", path: "MegaKill" },
        // { name: "Unstoppable", path: "Unstoppable" },
        // { name: "Monster Kill", path: "MonsterKill" },
        // { name: "God Like", path: "GodLike" },
        // { name: "Holy Shit", path: "HolyShit" },
        // { name: "WhickedSick", path: "WhickedSick" }
      ],
      isNavLi: true,
      isNavSelectLi: 0
    };
  },
  created: function() {
    var self = this;
  },
  mounted() {
    // 监听主进程返回的消息
    // ipcRenderer.on('minSizeClickCallBack', function (event, arg) {
    //   console.log(arg);
    // });
  },
  filters: {},
  methods: {
    minSizeClick() {
      ipcRenderer.send("minSizeClick");
    },
    maxSizeClick() {
      ipcRenderer.send("maxSizeClick");
    },
    closedClick() {
      ipcRenderer.send("closedClick");
    },
    goLoginClick() {
      ipcRenderer.send("GoLOGIN");
      this.$router.push({
        path: "/login"
      });
    },
    navClick(index) {
      var pathStr = this.navLists[index].path;
      this.$router.push({
        path: "/home/" + pathStr
      });
      this.isNavSelectLi = index;
    }
  },
  watch: {}
};
</script>

<style scoped>
.home {
  width: calc(100% - 0px);
  height: calc(100% - 0px);
  overflow: hidden;
}

.nav {
  display: flex;
  align-items: center;
  height: 50px;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}

.navLeft {
  display: flex;
  align-items: center;
}

.navL-logo {
  font-size: 18px;
  color: #000;
  font-weight: 700;
  /* margin-left: 15px; */
  width: 195px;
  text-align: center;
}

.navServer {
  /* margin-left: 15px; */
}

.navServer input {
  border: 1px solid #ccc;
  height: 28px;
  width: 250px;
  border-radius: 4px;
  padding-left: 10px;
  font-size: 16px;
  color: #000;
}

.navRight {
  display: flex;
  align-items: center;
}

.navRight div {
  width: 70px;
  height: 50px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 50px;
}

.navRight div:hover {
  background-color: #ccc;
}

.main {
  height: calc(100% - 50px);
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.mainLeft {
  width: 195px;
  height: 100%;
  border-left: 1px solid #ccc;
}

.navLi {
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}
.navSelectLi {
  background-color: rgb(94, 86, 86);
  color: #fff;
}
.mainRight {
  width: calc(100% - 195px);
  height: 100%;
  background-color: rgb(228, 215, 215);
}
</style>